import React, { useEffect, useMemo, useState } from 'react'
import { List, Button } from 'antd-mobile'
import { EnvironmentOutline } from 'antd-mobile-icons'
import { useLocation, useNavigate } from 'react-router-dom'
import Navbar from '../components/Navbar'
import { confirmOrder } from '../apis/order'
import "../style/orderconfirm.scss"
export default function OredeComfirm() {
  const navigate = useNavigate()
  const location = useLocation()
  const [address, setaddress] = useState<any>({})
  const [data, setdata] = useState<any>([])
  const [time, settime] = useState("")
  useEffect(() => {
    fun()
    settime(location.state.time)
  }, [])
  let fun = async () => {
    let res: any = await confirmOrder(localStorage.getItem("userid"), location.state.time)
    setaddress(res.address)
    setdata(res.data)
    console.log(res);
  }
  let total = useMemo(() => {
    let num = 0;
    let pirce = 0;
    data.forEach((item: any) => {
      num += item.num
      pirce += item.num * item.originprice
    })
    return [num, pirce]
  }, [data])
  return (
    <div className='orderconfirm'>
      <Navbar title="确认订单"/>
      <List >
        <List.Item prefix={<EnvironmentOutline />} key={address.addressid} onClick={() => { navigate("/addresslist", { state: { time, bool: true } }) }}>
          {
            address ?
              <>
                <p>{address.name} &nbsp; {address.tel}</p>
                <p>{address.province}  {address.city}  {address.county} {address.addressDetail}</p>
              </>
              :
              '请填写地址'
          }
        </List.Item>
      </List>

      <div className="list">
        {
          data &&
          data.map((item: any) => {
            return (
              <div className="item" key={item.proid}>
                <img src={item.img1} alt="" />
                <div className="info">
                  <div className="name">{item.proname}</div>
                  <div className="price">
                    <p>￥<span>{item.originprice}</span></p>

                    <div>x{item.num}</div>
                  </div>
                </div>
              </div>

            )
          })
        }

      </div>

      <div className="account">
        {
          <p>
            合计:<span>￥<span>{total[1]}</span></span>
            <Button color='danger' shape='rounded' onClick={() => { }}>去结算({total[0]})</Button>
          </p>
        }
      </div>
    </div>
  )
}
